<template>
  <m-layout>
    <mt-header slot="header" title="身体数据">
      <m-header-back slot="left"/>
    </mt-header>
    <div slot="body">
      <m-section class="bodydata-echart">
        <div ref="bodydata" :key="$route.fullPath"></div>
      </m-section>
    </div>
  </m-layout>
</template>

<script>
import { mapState } from 'vuex'
export default {
  computed: {
    ...mapState({
      bodyDataEchart: state => state.smartCourse.bodyDataEchart
    })
  },
  data () {
    return {
      eCharts: {},
      resultEchartsObjList: [],
      selectedTab: {
        yAxisMin: 0,
        yAxisMax: 0,
        yAxisName: '',
        data: null,
        name: '',
        splitNumber: 0
      }
    }
  },
  mounted () {
    this.studentBodyDataEchart().then(res => {
      if (res && res.data) {
        require.ensure([], (require) => {
          this.$$echarts = require('echarts/lib/echarts')
          require('echarts/lib/chart/line')
          require('echarts/lib/component/tooltip')
          this.formatStudentBodyData(res.data)
        })
      }
    })
  },
  updated () {
    if (!this.eCharts) {
      this.showECharts()
    }
  },
  methods: {
    studentBodyDataEchart () {
      return this.$store.dispatch('smartCourse/studentBodyDataEchart', this.$route.query)
    },
    formatStudentBodyData (data) {
      if (data.length > 0) {
        data.forEach((categoryItem) => {
          if (categoryItem) {
            let category = categoryItem.category
            let dataDetails = categoryItem.dataDetails
            let resultObj = Object.assign({}, this.selectedTab)
            let data = []
            category.categoryId !== undefined && (resultObj['categoryId'] = category.categoryId)
            category.categoryName !== undefined && (resultObj['name'] = category.categoryName)
            category.echartMinValue !== undefined && (resultObj['yAxisMin'] = category.echartMinValue)
            category.echartMaxValue !== undefined && (resultObj['yAxisMax'] = category.echartMaxValue)
            category.unitName !== undefined && (resultObj['yAxisName'] = category.unitName)
            category.echartSection !== undefined && (resultObj['splitNumber'] = category.echartSection)
            if (dataDetails.length > 0) {
              dataDetails.forEach((dataItem) => {
                let dataItemArr = []
                dataItem.recordAge !== undefined && dataItemArr.push(dataItem.recordAge)
                dataItem.studentBodyData.dataValue !== undefined && dataItemArr.push(dataItem.studentBodyData.dataValue)
                dataItem.studentBodyData.createTime !== undefined && dataItemArr.push(dataItem.studentBodyData.createTime)
                data.push(dataItemArr)
              })
              resultObj['data'] = data
              this.resultEchartsObjList.push(resultObj)
            }
            // console.log(resultObj.categoryId, this.$route.query.categoryId)
            if (resultObj.categoryId + '' === this.$route.query.categoryId + '') {
              this.selectedTab = resultObj
            }
          }
        })
        this.$nextTick(this.showECharts)
      }
    },
    showECharts () {
      let echartsDom = this.$refs.bodydata
      echartsDom.style.height = '600px'
      this.eCharts = this.$$echarts.init(echartsDom)
      this.eCharts.setOption(this.growUpChartOption(this.selectedTab))
    },
    growUpChartOption (query) {
      return {
        legend: {},
        tooltip: {
          triggerOn: 'click',
          formatter: function (params) {
            return `${new Date(params.data[2]).format('yyyy-MM-dd')}<br>${query['name']}: ${params['data']['1']}${query['yAxisName']}<br>`
          },
          padding: [10, 10, 10, 10],
          textStyle: {
            color: '#4f4f4f'
          },
          extraCssText: 'background: white;box-shadow:0px 2px 5px rgba(0,0,0,0.1);',
          position: function (p, params, dom, rect, size) {
            let screenWidth = document.body.offsetWidth
            let left = screenWidth / 3
            let right = (screenWidth / 3) * 2
            if (p[0] < left) {
              return [p[0] + 10, p[1] + 20]
            }
            if (left <= p[0] && p[0] <= right) {
              return [p[0] - size.contentSize[0] / 2, p[1] + 20]
            }
            if (p[0] > right) {
              return [p[0] - size.contentSize[0], p[1] + 20]
            }
          }
        },
        toolbox: {
          show: false
        },
        xAxis: {
          min: 0,
          max: 20,
          name: '岁',
          type: 'value',
          splitNumber: 9,
          axisLine: {
            onZero: false,
            lineStyle: {
              color: '#999999'
            }
          },
          splitLine: {
            lineStyle: {
              color: ['#e5e5e5'],
              type: 'dashed'
            }
          }
        },
        yAxis: {
          min: query.yAxisMin,
          max: query.yAxisMax,
          name: query.yAxisName,
          type: 'value',
          splitNumber: query.splitNumber,
          axisLine: {
            onZero: true,
            lineStyle: {
              color: '#999999'
            }
          },
          splitLine: {show: false}
        },
        series: [{
          type: 'line',
          data: query.data,
          symbolSize: 10,
          lineStyle: {
            normal: {
              color: '#23c270',
              borderColor: '#23c270',
              borderWidth: 2
            }
          },
          itemStyle: {
            normal: {
              borderWidth: 2,
              borderColor: '#23c270',
              label: {
                show: false
              }
            }
          },
          animationDelay: function (idx) {
            return idx * 10
          }
        }],
        animationEasing: 'elasticOut',
        animationDelayUpdate: function (idx) {
          return idx * 5
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>

</style>
